<template>
  <div id="main" style="width:400px;height:400px">

  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  props: {
    pieData: Object
  },
  data(){
    return {
      pieDataName:Object.keys(this.pieData)
    }
    
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))

    // 指定图表的配置项和数据
    var option = {
      title: {
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [this.pieDataName[1],this.pieDataName[2], this.pieDataName[3],this.pieDataName[4],this.pieDataName[5],this.pieDataName[6]]
      },
      series: [
        {
          name: '半径模式',
          type: 'pie',
          radius: [20, 140],
          center: ['50%'],
          roseType: 'radius',
          itemStyle: {
            borderRadius: 5
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true
            }
          },
          data: [
            { value: this.pieData.bread, name: this.pieDataName[1] },
            { value: this.pieData.cigarette, name: this.pieDataName[2] },
            { value: this.pieData.drinks, name: this.pieDataName[3] },
            { value: this.pieData.liquor, name:this.pieDataName[4] },
            { value: this.pieData.milk, name: this.pieDataName[5] },
            { value: this.pieData.snacks, name:this.pieDataName[6] }
          ]
        },
        {
          name: '面积模式',
          type: 'pie',
          radius: [20, 140],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },
          data: [
            { value: this.pieData.bread, name: this.pieDataName[1] },
            { value: this.pieData.cigarette, name: this.pieDataName[2] },
            { value: this.pieData.drinks, name: this.pieDataName[3] },
            { value: this.pieData.liquor, name:this.pieDataName[4] },
            { value: this.pieData.milk, name: this.pieDataName[5] },
            { value: this.pieData.snacks, name:this.pieDataName[6] }
          ]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  },
  created(){
    console.log(this.pieDataName)
  }

}
</script>

<style>

</style>
